<template name="homepage">
  <div class="layout-body bg-white">
    <div class="d-block" style="background: #f5f5f5;">
      <div class="container text-center rounded">
        <img class="rounded-circle mt-3 mb-1" src="{{avatar}}" width="120" height="120">
        <h3 class="mt-3 mb-1">{{display}}</h3>
        <p class="text-muted">@{{username}}</p>
      </div>
    </div>
    <div class="d-block p-3">
      <div class="container">
        <div class="row">
          {{#each channel in channels}}
            {{> exploreChannelCard channel=channel}}
          {{else}}
            <p class="text-muted mx-auto">😅 暂时没有相关的内容呢</p>
          {{/each}}
          {{#if hasMore}}
            <div class="col-12">
              <button type="button" class="btn btn-light mx-auto btn-block" id="homepage-loadmore">加载更多</button>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
</template>